<template>
  <div class="about">
    <h1>简单slot使用实例</h1>
    <v-slot></v-slot>
    <v-slot>现在看到的是自定义内容</v-slot>

    ----------------------------------------------
    <h1>具名slot使用实例</h1>

    <h2>新的使用方式 使用v-slot:插槽名称</h2>
    <v-slot-name>
      <template v-slot:header>
        自定义header
      </template>
      <p>没有指定v-slot名称，自定义main</p>
    </v-slot-name>

    <h2>老的使用方式 使用slot="插槽名称"</h2>
    <v-slot-name>
      <template slot="header">
        自定义header
      </template>
      <p>没有指定v-slot名称，自定义main</p>
    </v-slot-name>

    <v-slot-name>
      <template v-slot:header>
        自定义header
      </template>
      <template v-slot:default>
        指定了default，看到自定义的main
      </template>
    </v-slot-name>
    ------------------------------------------------
    <h1>作用域插槽</h1>
    <h2>新的使用方式 使用v-slot:插槽名称="组件全局变量"</h2>
    <v-slot-scope :user="user">
      <template v-slot:default="slotProps">
        这是指定插槽名称的写法
        {{ slotProps.user.name }}
      </template>
    </v-slot-scope>

    <h2>老的使用方式 使用slot="插槽名称" slot-scope="组件全局变量"</h2>
    <v-slot-scope :user="user">
      <template slot="default" slot-scope="slotProps">
        这是指定插槽名称的写法
        {{ slotProps.user.name }}
      </template>
    </v-slot-scope>

    <v-slot-scope :user="user" v-slot="slotProps">
      这是新语法中的，独占插槽的写法，省去了default插槽名称，和template标签
      {{ slotProps.user.name }}
    </v-slot-scope>
  </div>
</template>
<script>
import VSlot from "@/components/v-slot";
import VSlotName from "@/components/v-slot-name";
import VSlotScope from "@/components/v-slot-scope";
export default {
  name: "ssslot",
  data() {
    return {
      user: {
        name: "张三",
        age: 22
      }
    };
  },
  components: {
    "v-slot": VSlot,
    "v-slot-name": VSlotName,
    "v-slot-scope": VSlotScope
  }
};
</script>
